<template>
  <div class="container">
    <div class="opt-area-02">
        <div class="left-con">
            录入总数: <span>{{countData.fcnum}} 条</span>
        </div>
        <div class="right-con">
          <div class="input-frame" style="width: 164px">
            <Input type="text" @on-click="selectlist(1)" placeholder="请输入姓名" style="width: 164px" v-model="params.name"
                     icon="ios-search"/>
          </div>
          <div class="input-frame" style="width: 164px">
           <Input type="text" @on-click="selectlist(1)" placeholder="请输入身份证号" style="width: 164px" v-model="params.cardno"
                     icon="ios-search"/>
          </div>
          <div class="input-frame" style="width: 164px">
              <Input type="text" @on-click="selectlist(1)" placeholder="请输入联系方式" style="width: 164px" v-model="params.mobile"
                    icon="ios-search"/>
          </div>
          <div class="input-frame" v-if="companyCode === 'LM'" style="width: 164px">
            <Select v-model="params.area1" placeholder="区/县" filterable @on-change="perChange(1)">
              <Option v-for="obj in addressInfo.list1" :value="obj.company_code" :key="obj.id">{{obj.title}}</Option>
            </Select>
          </div>
          <div class="input-frame" v-if="companyCode === 'LM'" style="width: 164px">
            <Select v-model="params.area2" placeholder="街道" filterable @on-change="perChange(2)">
              <Option v-for="obj in addressInfo.list2" :value="obj.company_code" :key="obj.id">{{obj.title}}</Option>
            </Select>
          </div>
          <div class="input-frame" v-if="companyCode === 'LM'" style="width: 164px">
            <Select v-model="params.area3" placeholder="社区" filterable>
              <Option v-for="obj in addressInfo.list3" :value="obj.company_code" :key="obj.id">{{obj.title}}</Option>
            </Select>
          </div>
          <Button type="info" size="small" @click="selectlist(1)" style="margin-top: 5px">搜索</Button>
        </div>
        <div class="right-con">
        <div class="input-frame" style="width: 164px">
          <Select v-model="params.bac_scan_type" placeholder="备案类型" @on-change="selectlist(params.pageNo)" style="width: 164px">
            <Option value="">全部</Option>
            <Option value="0">入沈</Option>
            <Option value="1">离沈</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select v-model="params.is_yimiao" placeholder="疫苗情况" @on-change="selectlist(params.pageNo)" style="width: 164px">
            <Option value="">全部</Option>
            <Option value="0">未接种</Option>
            <Option value="1">已接种</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select v-model="params.is_hesuan" placeholder="七日核酸情况" @on-change="selectlist(params.pageNo)" style="width: 164px">
            <Option value="">全部</Option>
            <Option value="0">未检测</Option>
            <Option value="1">已检测</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px">
          <Select v-model="params.info_temperature_flag" placeholder="体温情况" style="width: 164px">
            <Option value="">全部</Option>
            <Option value="0">正常</Option>
            <Option value="1">发热</Option>
          </Select>
        </div>
        <div class="input-frame" style="width: 164px">
          <DatePicker type="datetimerange" v-model="dateArr" placeholder="选择备案时间起止" style="width: 164px"></DatePicker>
        </div>
        <div class="input-frame" style="width: 164px">
          <DatePicker type="datetimerange" v-model="dateArr1" placeholder="选择离沈时间起止" style="width: 164px"></DatePicker>
        </div>
      </div>
    </div>
    <Table :loading="countData.loading" border :columns="columns1" :data="baDataList" size="small" ref="table">
      <template slot-scope="{ row }" slot="sex">
        <span v-if="row.sex == '0'">男</span>
        <span v-if="row.sex == '1'">女</span>
      </template>
      <template slot-scope="{ row }" slot="cardno_type">
        <span v-if="row.cardno_type == '0'">儿童</span>
        <span v-if="row.cardno_type == '1'">身份证</span>
        <span v-if="row.cardno_type == '2'">军官证</span>
        <span v-if="row.cardno_type == '3'">护照</span>
        <span v-if="row.cardno_type == '4'">港澳通行证</span>
      </template>
      <template slot-scope="{ row }" slot="bac_scan_type">
        <span v-if="row.bac_scan_type == '0'">入沈</span>
        <span v-if="row.bac_scan_type == '1'">离沈</span>
      </template>
      <template slot-scope="{ row }" slot="is_yimiao">
        <span v-if="row.is_yimiao == '0'" style="color: red">未接种</span>
        <span v-if="row.is_yimiao == '1'">已接种<Icon type="ios-attach" @click="openFile(row.is_yimiao_file)"/></span>
      </template>
      <template slot-scope="{ row }" slot="is_hesuan">
        <span v-if="row.is_hesuan == '0'" style="color: red">未检测</span>
        <span v-if="row.is_hesuan == '1'">已检测<Icon type="ios-attach" @click="openFile(row.is_hesuan_file)"/></span>
      </template>
      <template slot-scope="{ row }" slot="info_temperature_flag">
        <span v-if="row.info_temperature_flag == '0'">正常</span>
        <span v-if="row.info_temperature_flag == '1'" style="color: red">发热</span>
      </template>
      <template slot-scope="{ row }" slot="info_other_flag">
        <span v-if="row.info_other_flag == '0'">否</span>
        <span v-if="row.info_other_flag == '1'" style="color: red">是</span>
      </template>
      <template slot="action" slot-scope="{ row }">
        <Row style="margin-bottom: 5px; margin-top: 2px">
          <Button class="table-action-btn" type="info" size="small" @click="showdetail(row)">行程详情</Button>
          <Button class="table-action-btn" type="success" size="small" @click="detailsInfo(row)">详情</Button>
          <Button v-show="(severUserInfo.level === '40' || severUserInfo.level === '45') && row.bac_scan_type === '0'" class="table-action-btn" type="error" size="small" @click="addPeople(row)">管控</Button>
        </Row>
      </template>
    </Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>查询中...</div>
        </Spin>
      </Col>
    </Row>
    <Row type="flex" justify="end" class="page_style">
       <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
          show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
    </Row>
    <Modal v-model="modal" title="行程详情" :width="personnelInfo.bac_scan_type != '0' ? 554 : 674" footer="false">
      <Table :loading="countData.loading" v-if="personnelInfo.bac_scan_type != '0'" border :columns="columns2" :data="dataList"/>
      <Table :loading="countData.loading" v-if="personnelInfo.bac_scan_type == '0'" border :columns="columns3" :data="dataList"/>
      <div slot="footer"></div>
    </Modal>
<!--    <Modal v-model="modal" title="行程详情" :width="676" footer="false">-->
<!--      <Table :loading="countData.loading" v-if="personnelInfo.bac_scan_type != '0'" border :columns="columns2" :data="dataList"/>-->
<!--      <Table :loading="countData.loading" v-if="personnelInfo.bac_scan_type == '0'" border :columns="columns3" :width="642" :data="dataList"/>-->
<!--      <div slot="footer"></div>-->
<!--    </Modal>-->
    <Modal v-model="modal1" :title="'备案编号: ' + personnelInfo.bac_code" :width="600" footer="false">
      <template>
      <Form :label-width="120" :label-colon="true">
        <FormItem label="姓名" prop="姓名">
          <span>{{personnelInfo.name}}</span>
        </FormItem>
        <FormItem label="身份证" prop="身份证">
          <span>{{personnelInfo.cardno}}</span>
        </FormItem>
        <FormItem label="证件号类型" prop="证件号类型">
          <span>{{personnelInfo.cardno_type}}</span>
        </FormItem>
        <FormItem label="电话号码" prop="电话号码">
          <span>{{personnelInfo.mobile}}</span>
        </FormItem>
        <FormItem label="性别" prop="性别">
          <span>{{personnelInfo.sex}}</span>
        </FormItem>
        <FormItem label="年龄" prop="年龄">
          <span>{{personnelInfo.age}}</span>
        </FormItem>
        <FormItem label="备案类型" prop="备案类型">
          <span>{{personnelInfo.bac_scan_type}}</span>
        </FormItem>
        <FormItem label="备案时间" prop="备案时间">
          <span>{{personnelInfo.bac_time}}</span>
        </FormItem>
        <FormItem label="区/县" prop="区/县">
          <span>{{personnelInfo.qu_name}}</span>
        </FormItem>
        <FormItem label="街道" prop="街道">
          <span>{{personnelInfo.jiedao_name}}</span>
        </FormItem>
        <FormItem label="社区" prop="社区">
          <span>{{personnelInfo.shequ_name}}</span>
        </FormItem>
        <FormItem label="疫苗接种情况" prop="疫苗接种情况">
          <span>{{personnelInfo.is_yimiao}}</span>
        </FormItem>
<!--        <FormItem label="疫苗凭证" prop="疫苗凭证">-->
<!--          <span>{{personnelInfo.is_yimiao_file}}</span>-->
<!--        </FormItem>-->
        <FormItem label="核酸检测情况" prop="核酸检测情况">
          <span>{{personnelInfo.is_hesuan}}</span>
        </FormItem>
<!--        <FormItem label="核酸凭证" prop="核酸凭证">-->
<!--          <span>{{personnelInfo.is_hesuan_file}}</span>-->
<!--        </FormItem>-->
        <FormItem label="离沈入沈时间" prop="离沈入沈时间">
          <span>{{personnelInfo.leave_arrive_time}}</span>
        </FormItem>
        <FormItem label="体温状况" prop="体温状况">
          <span>{{personnelInfo.info_temperature_flag}}</span>
        </FormItem>
        <FormItem label="体温状况发热温度" prop="体温状况发热温度">
          <span>{{personnelInfo.info_temperature_1}}</span>
        </FormItem>
        <FormItem label="异常状况" prop="异常状况">
          <span>{{personnelInfo.info_other_flag}}</span>
        </FormItem>
      </Form>
      <div slot="footer"></div>
    </template>
  </Modal>
  <Modal v-model="modal2" title="详情信息" :width="900" footer="false">
    <template>
      <Card style="width:100%">
        <div style="text-align:center">
          <img :src="file_url" style="width: 100%"/>
        </div>
      </Card>
    </template>
    <div slot="footer"></div>
  </Modal>
  </div>
</template>

<script>

import { findYQScanFilingInfoList, findTripFilingInfoList, date0str } from '@/api/yi-qing-fang-kong'
import { grid_downlist } from '@/api/eventlist'
import { userinfoByCardNo } from '../../../api/yi-qing-fang-kong'

export default {
  name: 'index',
  data () {
    return {
      severUserInfo: {},
      params: { name: '', cardno: '', mobile: '', area1: '', area2: '', area3: '', bac_scan_type: '', is_yimiao: '', is_hesuan: '', info_temperature_flag: '', start_bac_time: '', end_bac_time: '', start_leave_arrive_time: '', end_leave_arrive_time: '', pageNo: 1, pageSize: 10, totalRecord: 0 },
      formInfo: {},
      countData: { loading: false, fcnum: 0, ytbnum: 0, zcnum: 0 },
      addressInfo: { list1: [], list2: [], list3: [] },
      dateArr: [],
      dateArr1: [],
      columns1: [
        { title: '姓名', key: 'name', width: 120, align: 'center' },
        { title: '证件类型', slot: 'cardno_type', width: 150, align: 'center' },
        { title: '证件号', key: 'cardno', width: 200, align: 'center' },
        { title: '年龄', key: 'age', width: 100, align: 'center' },
        { title: '性别', slot: 'sex', width: 100, align: 'center' },
        { title: '联系方式', key: 'mobile', width: 120, align: 'center' },
        { title: '区/县', key: 'qu_name', width: 120, align: 'center' },
        { title: '街道', key: 'jiedao_name', width: 120, align: 'center' },
        { title: '社区', key: 'shequ_name', width: 200, align: 'center' },
        { title: '备案编号', key: 'bac_code', width: 240, align: 'center' },
        { title: '备案时间', key: 'bac_time', width: 160, align: 'center' },
        { title: '备案类型', slot: 'bac_scan_type', width: 100, align: 'center' },
        { title: '疫苗接种情况', slot: 'is_yimiao', width: 120, align: 'center' },
        { title: '核酸检测情况', slot: 'is_hesuan', width: 120, align: 'center' },
        { title: '离沈入沈时间', key: 'leave_arrive_time', minWidth: 250, align: 'center' },
        { title: '体温状况', slot: 'info_temperature_flag', width: 100, align: 'center' },
        { title: '体温状况发热温度', key: 'info_temperature_1', minWidth: 200, align: 'center' },
        { title: '异常状况', slot: 'info_other_flag', width: 100, align: 'center' },
        { title: '操作', align: 'center', width: 200, slot: 'action', fixed: 'right' }
      ],
      columns2: [
        { title: '序号', type: 'index', width: 100, align: 'center' },
        { title: '离沈省份', key: 'bac_trip_sheng', width: 140, align: 'center' },
        { title: '离沈城市', key: 'bac_trip_shi', width: 140, align: 'center' },
        { title: '离沈区县', key: 'bac_trip_qu', width: 140, align: 'center' }
      ],
      columns3: [
        { title: '序号', type: 'index', width: 100, align: 'center' },
        { title: '途径省份', key: 'bac_trip_sheng', width: 140, align: 'center' },
        { title: '途径城市', key: 'bac_trip_shi', width: 140, align: 'center' },
        { title: '途径区县', key: 'bac_trip_qu', width: 140, align: 'center' },
        { title: '途径时间', key: 'bac_trip_date', width: 120, align: 'center' }
      ],
      loadData: true,
      modal: false,
      modal1: false,
      modal2: false,
      file_url: '',
      personnelInfo: {
        bac_code: '',
        bac_scan_type: '',
        bac_time: '',
        name: '',
        cardno: '',
        cardno_type: '',
        mobile: '',
        age: '',
        sex: '',
        qu_name: '',
        jiedao_name: '',
        shequ_name: '',
        is_yimiao: '',
        is_yimiao_file: '',
        is_hesuan: '',
        is_hesuan_file: '',
        leave_arrive_time: '',
        info_temperature_flag: '',
        info_temperature_1: '',
        info_other_flag: ''
      },
      dataList: [],
      baDataList: []
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  methods: {
    addPeople (e) {
      userinfoByCardNo(e.cardno).then(ret => {
        if (ret.data.errcode === 0) {
          let data = ret.data.data
          this.$Notice.error({ title: '管控失败', desc: '此人已在系统中存在！' + data.area + data.street + data.community })
        } else {
          if (ret.data.errcode === 10003) {
            if (this.severUserInfo.level === '40') {
              this.$router.push({
                path: '/yi-qing/add',
                query: {
                  what: 'add',
                  user_type: '1',
                  fromType: 'check',
                  peopleInfo: e
                }
              })
            }
            if (this.severUserInfo.level === '45') {
              this.$router.push({
                path: '/yi-qing/add',
                query: {
                  what: 'add',
                  user_type: '2',
                  fromType: 'check',
                  peopleInfo: e
                }
              })
            }
          } else {
            this.$Notice.error({ title: '管控失败', desc: ret.data.errmsg })
          }
        }
      })
    },
    selectlist (inpageNo) {
      this.params.start_bac_time = date0str(this.dateArr[0])
      this.params.end_bac_time = date0str(this.dateArr[1])
      this.params.start_leave_arrive_time = date0str(this.dateArr1[0])
      this.params.end_leave_arrive_time = date0str(this.dateArr1[1])
      if (inpageNo) {
        this.params.pageNo = inpageNo
      } else {
        this.params.pageNo = 1
      }
      this.getList()
    },
    pageAction (page) {
      this.params.pageNo = page
      this.getList()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo)
    },
    perChange (index) {
      let temparea = this.params['area' + index]
      if (!temparea) {
        return
      }
      let templist = this.addressInfo['list' + index]
      let tempdata = {}
      for (let i = 0; i < templist.length; i++) {
        if (temparea === templist[i].company_code) {
          tempdata = templist[i]
        }
      }
      if (this.params.area1 === 9999 || this.params.area1 === '9999') {
        this.addressInfo = {
          list1: this.addressInfo.list1,
          list2: [],
          list3: []
        }
        let arr = [ 1, 2, 3 ]
        arr.forEach(v => {
          this.params['area' + v] = ''
        })
      } else if (this.params.area2 === 9999 || this.params.area2 === '9999') {
        this.addressInfo = {
          list1: this.addressInfo.list1,
          list2: this.addressInfo.list2,
          list3: []
        }
        let arr = [ 2, 3 ]
        arr.forEach(v => {
          this.params['area' + v] = ''
        })
      } else {
        this.getDownAddress(tempdata.id, index + 1)
      }
    },
    // 下拉搜索框的级联查询
    getDownAddress (pid, index) {
      let param = {
        pid: pid,
        pageNo: 1,
        pageSize: 200
      }
      grid_downlist(param).then(res => {
        if (res.data.data) {
          this.addressInfo['list' + index] = res.data.data.results
          let obj = {
            id: '',
            level: '',
            mapjson: '',
            path: '',
            pid: 0,
            title: '全部',
            company_code: '9999'
          }
          this.addressInfo['list' + index].unshift(obj)
          this.perChange(index)
        } else {
          this.$Notice.error({ title: '查看失败', desc: '查询地址信息失败' })
        }
      })
    },
    getList () {
      this.baDataList = []
      this.loadData = true
      findYQScanFilingInfoList(this.params).then(res => {
        let result = res.data
        if (res.data.errcode === 0) {
          this.baDataList = res.data.data.results
          this.loadData = false
          this.countData.fcnum = res.data.data.totalRecord
          this.params = {
            pageNo: result.data.pageNo,
            pageSize: result.data.pageSize,
            totalPage: result.data.totalPage,
            totalRecord: result.data.totalRecord,
            name: this.params.name,
            cardno: this.params.cardno,
            mobile: this.params.mobile,
            area: this.params.area,
            street: this.params.street,
            community: this.params.community,
            area1: this.params.area1,
            area2: this.params.area2,
            area3: this.params.area3,
            bac_scan_type: this.params.bac_scan_type,
            is_yimiao: this.params.is_yimiao,
            is_hesuan: this.params.is_hesuan,
            info_temperature_flag: this.params.info_temperature_flag,
            start_bac_time: this.params.start_bac_time,
            end_bac_time: this.params.end_bac_time,
            start_leave_arrive_time: this.params.start_leave_arrive_time,
            end_leave_arrive_time: this.params.end_leave_arrive_time
          }
        } else {
          this.loadData = true
          this.$Notice.error({
            title: '查询列表信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    showdetail (item) {
      this.modal = true
      this.personnelInfo.bac_scan_type = item.bac_scan_type
      findTripFilingInfoList({ bac_scan_person_id: item.id }).then(ret => {
        if (ret.data.errcode === 0) {
          this.dataList = ret.data.data
        } else {
          this.loadData = true
          this.$Notice.error({
            title: '查询行程信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    openFile (url) {
      this.modal2 = true
      this.file_url = ''
      this.file_url = url
    },
    detailsInfo (item) {
      this.modal1 = true
      for (let obj in item) {
        if (obj === 'cardno_type') {
          item.cardno_type = item.cardno_type === '0' ? '儿童' : item.cardno_type === '1' ? '身份证' : item.cardno_type === '2' ? '军官证' : item.cardno_type === '3' ? '护照' : item.cardno_type === '4' ? '港澳通行证' : ''
        }
        if (obj === 'sex') {
          item.sex = item.sex === '0' ? '男' : item.cardno_type === '1' ? '女' : ''
        }
        if (obj === 'bac_scan_type') {
          item.bac_scan_type = item.bac_scan_type === '0' ? '入沈' : item.cardno_type === '1' ? '离沈' : ''
        }
        if (obj === 'is_yimiao') {
          item.is_yimiao = item.is_yimiao === '0' ? '未接种' : item.cardno_type === '1' ? '已接种' : ''
        }
        if (obj === 'is_hesuan') {
          item.is_hesuan = item.is_hesuan === '0' ? '无' : item.cardno_type === '1' ? '有' : ''
        }
        if (obj === 'info_temperature_flag') {
          item.info_temperature_flag = item.info_temperature_flag === '0' ? '正常' : item.cardno_type === '1' ? '发热' : ''
        }
        if (obj === 'info_other_flag') {
          item.info_other_flag = item.info_other_flag === '0' ? '否' : item.cardno_type === '1' ? '是' : ''
        }
        if (obj === 'is_havetrip') {
          item.is_havetrip = item.is_havetrip === '0' ? '否' : item.cardno_type === '1' ? '是' : ''
        }
      }
      this.personnelInfo = item
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    console.log(this.severUserInfo)
    this.getDownAddress(0, 1)
    this.getList()
  }
}
</script>

<style scoped>
  .page_style {
      margin: 20px 5px;
  }

  .input-frame {
      width: 120px;
      margin-right: 10px;
  }

  .house-list > .group {
      background: white;
      padding: 10px;
      margin-top: 10px;
  }

  .house-list > .group > .item {
      border-bottom: 1px solid #f5f5f5;
      padding: 10px 0;
  }

  .house-list > .group > .item .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
  }

  .house-list > .group > .item .title {
      font-size: 14px;
      color: #333333;
  }

  .house-list > .group > .item .address {
      font-size: 12px;
      color: gray;
      display: flex;
      align-items: center;
  }

  .house-list > .group > .item .detail {
      font-size: 12px;
      color: dodgerblue;
  }

  .opt-area-02 {
      display: flex;
      align-items: center;
      flex-direction: column;
      border: 1px solid #abdcff;
      background-color: #f0faff;
      padding: 8px 16px 8px 16px;
      border-radius: 4px;
      margin-bottom: 10px;
  }

  .opt-area-02 .right-con {
      width: 100%;
      margin-top: 5px;
      display: flex;
  }

  .opt-area-02 .left-con {
      font-size: 14px;
      width: 100%;
  }

  .opt-area-02 .left-con span {
      font-weight: bold;
  }

  .opt-area-02 .right-con input {
      width: 150px;
      margin-right: 10px;
  }

  .opt-area-02 .right-con .input-frame {
      width: 200px;
      margin-right: 10px;
  }

  .table-action-btn {
      margin-right: 3px;
  }

  .container >>> .ivu-btn-small {
      height: 24px;
      padding: 0 5px;
      font-size: 12px;
      border-radius: 3px;
  }

  .btn-action {
      margin-bottom: 10px;
  }

  .mp10 {
      margin-right: 10px;
  }
  .title-style {
    color: red;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .ivu-table-row {
    height: 57px;
  }
  .ivu-form-item{
    margin-bottom: 0%;
  }
</style>
